<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: 何志龙
 * @Date: 2023-12-06 09:13:43
 * @LastEditors: wjh
 * @LastEditTime: 2024-03-27 15:29:30
-->
<template>
  <div class="gsaupLoad">
    <div style="padding: 20px 10px">
      <ul v-for="(items, index) in FJData" :key="index">
        <div style="line-height: 30px; border-bottom: 1px solid #d2d2d2; font-size: 17px">
          <li style="font-weight: 600" v-if="items.title"><span style="color: red" v-show="items.isReadOnly">*</span>{{ items.title }}</li>
          <li style="font-size: 14px">
            文件：<span v-if="items.FileName.length == 0">暂无数据</span>
            <div v-else>
              <p style="color: #3f8ffc" v-for="it in items.FileName">
                <span @click="handleLJD(it)">{{ it.name }} </span><van-icon @click="delectFile1(it)" name="close" color="red" style="float: right" />
              </p>
            </div>
          </li>
          <van-uploader
            :disabled="ISDelete"
            multiple
            :max-count="items.num?items.num:20"
            :deletable="!ISDelete"
            @click-upload="getList(items)"
            @click-preview="lookFile"
            :after-read="afterRead"
            :before-delete="delectFile"
            v-model="items.fileList">
          </van-uploader>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { ossUploadFiles, ossdelteFiles, osspreviewFiles } from '@/utils/api'
export default {
  data() {
    return {
      groupGuids: [],
      groupGuid:"",
      ROW_GUID: '',
      filename: '', //用来区分当前点击的哪个lable
      tableBZCL: {
        FILENAME: '',
        FILETYPE: '',
        FILESIZE: '',
        CREATEUSERID: '',
        CREATEDATE: '',
        FILEGUID: ''
      }
    }
  },
  props: {
    typeParam: String,
    tkRowGuid: String,
    rowData: Object, //当前行的信息
    FJData: Array, //需要展示的内容
    ISDelete: Boolean
  },
  methods: {
    //预览文件
    async getFileOss() {
      // this.fileList[2].fileList.push({
      //     id: item.id,
      //     url: window.g.BaseURL + 'api/upload/oss/preview?fileId=' + item.id,
      //     isImage: true,
      //     name: item.fileName,
      // })
      this.FJData.forEach((items) => {
        if (items.title.indexOf('pdf') > -1) {
            items.groupGuid.forEach((item, index) => {
            items.FileName.push({
              url: window.g.BaseURL + 'api/upload/oss/preview?fileId=' + item.id,
              isImage: true,
              id:item.id,
              name: items.title,
            })
          })
        } else {
          items.groupGuid.forEach((item, index) => {
            items.fileList.push({
              url: window.g.BaseURL + 'api/upload/oss/preview?fileId=' + item.id,
              isImage: true
              // name: items.fileName,
            })
          })
        }
      })
      console.log(this.FJData)
    },
    // 上传文件
    getFileServerUpload: async function (file, data) {
      debugger
      let formData = new FormData()
      formData.append('files', file)
      formData.append('path', 'tj')
      formData.append('groupName', '图集信息')
      formData.append('toGroupGuid', this.groupGuid)
      const res = await ossUploadFiles(formData)
      let data2 = res.data.data
      data.status = 'done'
      data.message = ''
      data['title'] = this.filename
      this.$toast.success('上传成功!')
      data2.forEach((item) => {
        let lastname = item.name.split('.')
        // lastname[1].toUpperCase()   PNG JPG JPEG PDF
        //根据上传成功之后返回值判断是pdf还是png
        if (lastname[1].toUpperCase() == 'PDF') {
          this.FJData.forEach((items) => {
            if (items.title == this.filename) {
              items.FileName.push(item)
              data.id = item.id
              items.groupGuid.push(item.id)
            }
          })
        } else {
          this.FJData.forEach((items) => {
            if (items.title == this.filename) {
              items.groupGuid.push(item.id)
              data.id = item.id
            }
          })
        }
      })
    },
    handleLJD(data){
      this.toHref(data.url)
    },
    delectFile1(data){

    },
    async toHref(url) {
      //跳转至view需要用户手动复制预览1
      //微信小程序需要端内打开
      if (window.sessionStorage.getItem('showBg2') == 'true') {
        this.$router.push({
          path: '/PDFJSViewer',
          query: {
            path: url,
          },
        })
      } else {
        //根据id获取
        //iphone先这样处理
        if (ZWJSBridge) {
          ZWJSBridge.openLink({
            url: url,
          })
            .then((res) => {})
            .catch((err) => {
              window.open(url)
            })
        }
      }
    },
    getList(item) {
      console.log(item, 'hezhilong')
      this.filename = item.title
      this.groupGuid=item.groupGuid;
      // this.getFileServerUpload(fileList[0], item)
    },
    lookFile(item) {
      if (item.isImage == false) {
        if (ZWJSBridge) {
          ZWJSBridge.openLink({
            url: item.url
          })
            .then((res) => {})
            .catch((err) => {})
        }
      }
    },
    async delectFile1(file) {
      // this.delectFile(item)
      let arr = []
      arr.push(file.id)
      const res = await ossdelteFiles(arr)
      if (res.data.data) {
        this.$toast.success(res.data.msg)
        //并且清除这条数据在界面上
        this.FJData.forEach((items) => {
          if (items.title == file.title) {
            items.FileName.forEach((it, index) => {
              if (it.id == file.id) {
                items.FileName.splice(index, 1)
              }
            })
            items.groupGuid.forEach((it, index) => {
              if (it == file.id) {
                items.groupGuid.splice(index, 1)
              }
            })
          }
          //删除pdf文件
          items.fileList.forEach((it, index) => {
            console.log(it.file['name'])
            let a = it.file['name'].toString()
            if (a.indexOf('pdf') > -1) {
              items.fileList.splice(index, 1)
              console.log(items.fileList)
            }
          })
        })
      }
    },
    async delectFile(file) {
      // this.delectFile(item)
      console.log(file)
      let arr = []
      arr.push(file.id)
      const res = await ossdelteFiles(arr)
      if (res.data.data) {
        this.$toast.success(res.data.msg)
        //删除成功后要删除这个之前存起来的id
        this.FJData.forEach((items) => {
          if (items.title == file.title) {
            debugger
            items.groupGuid.forEach((it, index) => {
              if (it == file.id) {
                debugger
                items.groupGuid.splice(index, 1)
              }
            })
          }
        })
      }
      console.log(this.FJData, '喜欢')
    },
    afterRead(file, fileList) {
      if (Array.isArray(file)) {
        file.forEach((item) => {
          console.log(item, fileList)
          item.status = 'uploading'
          item.message = '上传中...'
          this.getFileServerUpload(item.file, item)
        })
      } else {
        console.log(file, fileList)
        file.status = 'uploading'
        file.message = '上传中...'
        this.getFileServerUpload(file.file, file)
      }
    }
  },
  mounted() {
    setTimeout(() => {
     // this.getFileOss()
    }, 1000)
    // this.getFileOss
  }
}
</script>
